<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px" class="layout-aside">
        <AppMenu />
      </el-aside>
      <el-container class="main">
        <el-header class="layout-header">
          <AppHeader />
        </el-header>

        <el-main>
          <div class="layout-content">
            <RouterView />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts"></script>

<style>
.layout {
  background-color: #efefef;
}

.layout-aside {
  z-index: 10;
  height: 100vh;
  background-color: #fff;
  box-shadow: 1px 0 2px #ccc;
}

.layout-header {
  background-color: #fff;
  border-bottom: 1px solid #efefef;
}

/* .layout-content {
  background-color: #fff;
  box-shadow: 0 0 2px #ccc; */
/* padding: 20px;
} */
</style>
